<template>
	<view class="coupon">
		<view class="gz"> <u-icon name="volume-fill" color="#ebceac" size="20"></u-icon>
			优惠券使用规则</view>

		<view class="lq">
			<view class="itemlq" @click="goPage('免费领券')">
				<image src="/static/免费领券.png" mode=""></image>
				<text>免费领券</text>
			</view>
			<view class="itemlq" @click="goPage('立即兑券')">
				<image src="/static/积分兑券.png" mode=""></image>
				<text>立即兑券</text>
			</view>
		</view>
		<!-- 优惠券部分 -->
		<coponItemVue :list2="list2" pageLogo="coupon"></coponItemVue>
	</view>
</template>

<script>
	/**
	 * @description 优惠券界面
	 */
	import coponItemVue from '@/common/coponItem/coponItem.vue'
	export default {
		components: {
			coponItemVue
		},
		data() {
			return {

				list2: [{
					name: '未使用',
					badge: {
						value: 2
					},
					listdata: [{
						name: "家务初体验70元红包券",
						status: 0, //0，未使用 ，1已使用 2已过期
						price: 15, //价格
						type: 0, //0满减卷,1，无门槛
						rule: "满200可用", //规则
						lifespan: "2025-02-23 00:00:00", //有效期
						instructions: ["限以下商品可用:奢侈品清洗次卡工6【不含LV植鞣革 稀有皮/爱马仕包】", "限以下平台可用:自营app,自营H5,微信小程序",
							"不可与拼团一起使用", "不可与抵用金一起使用"
						]
						//使用说明
					}, {
						name: "家务初体验70元红包券",
						status: 0, //0，未使用 ，1已使用 2已过期
						price: 20, //价格
						type: 1, //0满减卷,1，无门槛
						rule: "无门槛", //规则
						lifespan: "2025-02-23 00:00:00", //有效期
						instructions: ["限以下商品可用:奢侈品清洗次卡工6【不含LV植鞣革 稀有皮/爱马仕包】", "限以下平台可用:自营app,自营H5,微信小程序"]
						//使用说明
					}, {
						name: "家务初体验70元红包券",
						status: 0, //0，未使用 ，1已使用 2已过期
						price: 20, //价格
						type: 1, //0满减卷,1，无门槛
						rule: "无门槛", //规则
						lifespan: "2025-02-23 00:00:00", //有效期
						instructions: ["限以下商品可用:奢侈品清洗次卡工6【不含LV植鞣革 稀有皮/爱马仕包】", "限以下平台可用:自营app,自营H5,微信小程序"]
						//使用说明
					}, {
						name: "家务初体验70元红包券",
						status: 0, //0，未使用 ，1已使用 2已过期
						price: 20, //价格
						type: 1, //0满减卷,1，无门槛
						rule: "无门槛", //规则
						lifespan: "2025-02-23 00:00:00", //有效期
						instructions: ["限以下商品可用:奢侈品清洗次卡工6【不含LV植鞣革 稀有皮/爱马仕包】", "限以下平台可用:自营app,自营H5,微信小程序"]
						//使用说明
					}, {
						name: "家务初体验70元红包券",
						status: 0, //0，未使用 ，1已使用 2已过期
						price: 20, //价格
						type: 1, //0满减卷,1，无门槛
						rule: "无门槛", //规则
						lifespan: "2025-02-23 00:00:00", //有效期
						instructions: ["限以下商品可用:奢侈品清洗次卡工6【不含LV植鞣革 稀有皮/爱马仕包】", "限以下平台可用:自营app,自营H5,微信小程序"]
						//使用说明
					}, {
						name: "家务初体验70元红包券",
						status: 0, //0，未使用 ，1已使用 2已过期
						price: 20, //价格
						type: 1, //0满减卷,1，无门槛
						rule: "无门槛", //规则
						lifespan: "2025-02-23 00:00:00", //有效期
						instructions: ["限以下商品可用:奢侈品清洗次卡工6【不含LV植鞣革 稀有皮/爱马仕包】", "限以下平台可用:自营app,自营H5,微信小程序"]
						//使用说明
					}, ]
				}, {
					name: '已使用',
					badge: {
						isDot: true
					},
					listdata: [{
						name: "家务初体验70元红包券",
						status: 1, //0，未使用 ，1已使用 2已过期
						price: 15, //价格
						type: 0, //0满减卷,1，无门槛
						rule: "满200可用", //规则
						lifespan: "2025-02-23 00:00:00", //有效期
						instructions: ["限以下商品可用:奢侈品清洗次卡工6【不含LV植鞣革 稀有皮/爱马仕包】", "限以下平台可用:自营app,自营H5,微信小程序",
							"不可与拼团一起使用", "不可与抵用金一起使用"
						]
						//使用说明
					}]
				}, {
					name: '已失效',
					listdata: [],
				}, ],
			}
		},

		methods: {
			goPage(e) {
				if (e == "立即兑券") {
					this.$toPage("/otherPage/exchangeVouchers/exchangeVouchers")
				}
				if (e == "免费领券") {
					this.$toPage("/otherPage/freeCoupon/freeCoupon")
				}
			}


		}
	}
</script>

<style lang="less">
	.coupon {
		.gz {
			// position: fixed;//位置固定
			display: flex;
			align-items: center;
			background-color: #fff1d6;
			color: #846116;
			font-size: 12px;
			width: fit-content;
			padding: 2px;

		}

		.lq {
			margin-top: 15px;
			background-color: #ffffff;
			border-radius: 8px;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.itemlq {

				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				text {
					font-size: 12px;
					font-weight: bold;
				}

				image {
					width: 50px;
					height: 50px;
				}
			}
		}

	}
</style>